<template>
  <div class="daolan-wrap">
    <div class="top">
      <img :src="require('@/assets/images/cd-bank.svg')" alt="" width="360" class="logo">
      <span class="time-hm">{{ timer.hm }}</span>
      <span class="time-week">{{ timer.week }}</span>
      <span class="time-ymd">{{ timer.ymd }}</span>
    </div>
    <div class="content-daolan">
      <div class="left">
        <div class="content-inner">
          <img :src="require('@/assets/images/personal_fill.svg')" alt="" id="move-round">
          <img :src="require('@/assets/images/personal_fill.svg')" alt="" id="move-round1">
          <img :src="require('@/assets/images/personal_fill.svg')" alt="" id="fuck">
          <div :class="['con-item',s.pos]" v-for="(s,i) of areaList" :key="i" v-show="s.show">
            {{ s.area }}
          </div>
          <div class="con-item dianziyinhangqu2" v-show="showdianziyinhang">
            电子银行区
          </div>
        </div>
      </div>
      <div class="right" ref="rightDom">
        <div v-for="(s,i) of areaList" :key="i" class="right-item" @click="hiddenOther(i,s.pos)">
          {{ s.area }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import dayjs from 'dayjs'
import relativeTime from "dayjs/plugin/relativeTime"
import 'dayjs/locale/zh-cn'

dayjs.locale('zh-cn')
dayjs.extend(relativeTime);
export default {
  name: "daolan.vue",
  data() {
    let areaList = [
      {
        area: "咨询服务区",
        pos: 'zixunfuwuqu'
      },
      {
        area: "电子银行区",
        pos: 'dianziyinhangqu1'
      },
      {
        area: "客户等候区",
        pos: 'kehudenghouqu'
      },
      {
        area: "便民服务区",
        pos: 'bianminfuwuqu'
      },
      /*{
        area: "多功能区",
        pos: 'duogongnengqu'
      },*/
      {
        area: "公众教育区(金色年华专区)",
        pos: 'gonggongjiaoyuqu'
      },
      {
        area: "现金复点区",
        pos: 'xianjinfudianqu'
      },
      {
        area: "现金区",
        pos: 'xianjinqu'
      },
      {
        area: "非现金区",
        pos: 'feixianjinqu'
      },
      {
        area: "永攀高峰理财工作室",
        pos: 'yongpangaofenglicaishi'
      },
      {
        area: "成小探消保工作室",
        pos: 'chengxiaotanxiaobaogongzuoshi'
      },
      {
        area: "大李普惠金融工作室",
        pos: 'dalipuhuijinronggongzuoshi'
      },
      {
        area: "阳光理财工作室",
        pos: 'yangguanglicaigongzuoshi'
      },
      {
        area: "文化长廊",
        pos: 'wenhuachanglang'
      },
      {
        area: "24小时自助服务区",
        pos: 'hour24xiuxi'
      },
      {
        area: "文化展示区",
        pos: 'wenhuazhanshiqu'
      },
      {
        area: "财富管理中心",
        pos: 'caifuguanlizhongxin'
      },
      // {
      //   area: "金色年华专区",
      //   pos: 'jinsenianhua'
      // },
    ];
    areaList.forEach(i => {
      i.show = true
    })
    return {
      opacity: 1,
      timer: {
        ymd: '',
        hm: '',
        week: ''
      },
      interVal: null,
      areaList,
      showdianziyinhang: true,
    }

  },
  mounted() {
    this.getTime()
    this.domShowAll()
  },
  methods: {
    domShowAll() {
      document.addEventListener('click', (e) => {
        if (this.$refs.rightDom) {
          let isSelf = this.$refs.rightDom.contains(e.target)
          if (!isSelf) {
            this.areaList.forEach(i => {
              i.show = true
            })
            this.showdianziyinhang = true
            document.getElementById('move-round').className = ""
            document.getElementById('move-round1').className = ""
          }
        }
      })
    },


    hiddenOther(i, cName) {
      this.areaList.forEach(i => {
        if (i.area !== '咨询服务区') {
          i.show = false
        }
      })

      this.showdianziyinhang = false
      document.getElementById('move-round1').className = ""
      if (cName === 'dianziyinhangqu1') {
        this.showdianziyinhang = true
        document.getElementById('move-round').style.display = `none`
        document.getElementById('move-round1').className = `dianziyinhangqu2-move`
      }else{
        document.getElementById('move-round').style.display = `block`
      }

      this.areaList[i].show = true
      document.getElementById('move-round').className = `${cName}-move`
    },
    getTime() {
      this.timer.ymd = dayjs().format("YYYY-MM-DD");
      this.timer.hm = dayjs().format('HH:mm');
      this.timer.week = dayjs().format('dddd');
      this.interVal = setInterval(() => {
        this.timer.ymd = dayjs().format("YYYY-MM-DD");
        this.timer.hm = dayjs().format('HH:mm');
        this.timer.week = dayjs().format('dddd');
      }, 60000);

    }
  },
  destroyed() {
    clearInterval(this.interVal);
  }
}
</script>

<style lang="scss">
.daolan-wrap {
  position: relative;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
}

@keyframes bounce-down {
  25% {
    transform: translateY(-2px) scale(1.01);
  }
  50%, 100% {
    transform: translateY(0) scale(1);
  }
  75% {
    transform: translateY(2px) scale(0.99);
  }
}

.top {
  height: 110px;
  position: relative;
  background: #fff;

  .logo {
    width: 360px;
    position: absolute;
    left: 40px;
    top: 0;
  }

  .son-bank {
    font-size: 28px;
    position: absolute;
    left: 385px;
    top: 45px;
  }

  .time-hm, .time-week, .time-ymd {
    position: absolute;
    font-size: 24px;
    left: 1720px;
    font-weight: bold;

  }

  .time-hm {
    left: 1515px;
    top: 20px;
    font-size: 60px;
  }

  .time-week {
    top: 20px;

  }

  .time-ymd {
    top: 50px;
  }


}

.content-daolan {
  display: flex;

  .left {

    width: 1550px;
    position: relative;
    padding-top: 150px;

    .content-inner {
      width: 1304px;
      height: 749px;
      margin: 0 auto;
      //border: 1px solid red;
      overflow: hidden;
      position: relative;
      background: url("../../assets/images/daolan.png") no-repeat center center;
      background-size: cover;


      .con-item {
        position: absolute;
        height: 40px;
        line-height: 40px;
        text-align: center;
        color: #fff;
        background: #EEA12F;

        padding-left: 10px;
        padding-right: 10px;
        font-size: 14px;
        border-radius: 5px;
        z-index: 99;
        cursor: pointer;
        animation: bounce-down 3s linear infinite;


        i {
          font-size: 20px;
          color: #245DAE;
          position: absolute;
          bottom: -12px;
          left: 50%;
          transform: translateX(-50%);
        }


      }

      .zixunfuwuqu {
        left: 780px;
        top: 620px;
      }

      .dianziyinhangqu1 {
        left: 910px;
        top: 640px;
      }

      .dianziyinhangqu2 {
        left: 1040px;
        top: 560px;
      }

      .bianminfuwuqu {
        left: 950px;
        top: 435px;
      }

      .kehudenghouqu {
        left: 900px;
        top: 490px;
      }

      .duogongnengqu {
        left: 1080px;
        top: 370px;
      }

      .gonggongjiaoyuqu {
        left: 1000px;
        top: 380px;
      }

      .chengxiaotanxiaobaogongzuoshi {
        left: 700px;
        top: 240px;
      }

      .feixianjinqu {
        left: 800px;
        top: 360px;
      }

      .wenhuachanglang {
        left: 495px;
        top: 550px;
      }

      .hour24xiuxi {
        left: 20px;
        top: 320px;
      }

      .wenhuazhanshiqu {
        left: 170px;
        top: 220px;
      }

      .caifuguanlizhongxin {
        left: 350px;
        top: 380px;
      }

      .xianjinqu {
        left: 693px;
        top: 500px;
      }

      .yongpangaofenglicaishi {
        left: 655px;
        top: 320px;
      }

      .xianjinfudianqu {
        left: 600px;
        top: 555px;
      }

      .dalipuhuijinronggongzuoshi {
        left: 580px;
        top: 280px;
      }

      .jinsenianhua {
        left: 1090px;
        top: 455px;
      }

      .yangguanglicaigongzuoshi {
        left: 300px;
        top: 250px;
      }
    }
  }


  .right {
    padding-top: 4px;
    background: #D1810E;
    width: 370px;

    .right-item {
      user-select: none;
      width: 340px;
      cursor: pointer;
      height: 60px;
      line-height: 60px;
      background: #EEA12F;
      margin: 1px auto 0 auto;
      color: #fff;
      font-weight: bold;
      text-align: center;
      font-size: 20px;
    }
  }
}

#move-round, #move-round1 {
  width: 40px;
  position: absolute;
  transform: translate(790px, 620px);
  animation-duration: 8s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: 1s;
  animation-direction: alternate;
}
#move-round1{
 // border: 1px solid red;
}

@mixin endMove($x:805,$y:645) {
  50% {
    transform: translate(#{$x}px, #{$y}px);
  }
  100% {
    transform: translate(790px, 630px)
  }
}


$moveList: dianziyinhangqu1 dianziyinhangqu2 bianminfuwuqu xianjinfudianqu duogongnengqu gonggongjiaoyuqu kehudenghouqu feixianjinqu xianjinqu chengxiaotanxiaobaogongzuoshi yongpangaofenglicaishi wenhuazhanshiqu wenhuachanglang hour24xiuxi caifuguanlizhongxin jinsenianhua dalipuhuijinronggongzuoshi yangguanglicaigongzuoshi;

@each $animal in $moveList {
  .#{$animal}-move {
    animation-name: $animal;
  }
}

@keyframes dianziyinhangqu1 {
  25% {
    transform: translate(750px, 575px)
  }
  65% {
    transform: translate(855px, 550px)
  }
  100% {
    transform: translate(910px, 640px)
  }

}
.dianziyinhangqu1-move {
  animation-duration: 6s !important;
}


#fuck{
  width: 40px;
  position: absolute;
  transform: translate(945px, 580px);
  display: none;
  //border: 1px solid red;
}
@keyframes dianziyinhangqu2 {
  15% {
    transform: translate(790px, 575px)
  }
  25% {
    transform: translate(815px, 560px)
  }
  55% {
    transform: translate(905px, 639px)
  }
  65% {
    transform: translate(905px, 639px)
  }
  80% {
    transform: translate(945px, 580px);
  }
  100% {
    transform: translate(1040px, 560px)
  }

}

.bianminfuwuqu-move {
  animation-duration: 6s !important;
}

@keyframes bianminfuwuqu {
  20% {
    transform: translate(750px, 575px)
  }

  66% {
    transform: translate(880px, 430px)
  }
  100% {
    transform: translate(980px, 435px)
  }
}

.xianjinfudianqu-move {
  animation-duration: 6s !important;
}

@keyframes xianjinfudianqu {
  @include endMove(620, 555);
}


@keyframes duogongnengqu {
  20% {
    transform: translate(750px, 575px)
  }

  80% {
    transform: translate(1040px, 320px)
  }

  100% {
    transform: translate(1110px, 370px)
  }

}

.gonggongjiaoyuqu-move {
  animation-duration: 6s !important;
}

@keyframes gonggongjiaoyuqu {


  20% {
    transform: translate(750px, 575px)
  }

  50% {
    transform: translate(850px, 450px)
  }
  100% {
    transform: translate(1000px, 380px)
  }


}


.kehudenghouqu-move {
  animation-duration: 6s !important;
}

@keyframes kehudenghouqu {

  20% {
    transform: translate(750px, 575px)
  }
  70% {
    transform: translate(855px, 490px)
  }
  100% {
    transform: translate(920px, 490px)
  }
}

.feixianjinqu-move {
  animation-duration: 6s !important;
}

@keyframes feixianjinqu {

  33% {
    transform: translate(750px, 575px)
  }
  66% {
    transform: translate(845px, 480px)
  }
  100% {
    transform: translate(820px, 360px)
  }
}

.xianjinqu-move {
  animation-duration: 4s !important;
}

@keyframes xianjinqu {

  @include endMove(693, 500);

}

@keyframes chengxiaotanxiaobaogongzuoshi {
  20% {
    transform: translate(750px, 575px)
  }
  40% {
    transform: translate(845px, 480px)
  }
  60% {
    transform: translate(770px, 390px)
  }
  80% {
    transform: translate(740px, 290px)
  }
  100% {
    transform: translate(755px, 240px)
  }
}

@keyframes yongpangaofenglicaishi {
  10% {
    transform: translate(750px, 575px)
  }
  50% {
    transform: translate(875px, 450px)
  }
  80% {
    transform: translate(730px, 340px);
  }
  90% {
    transform: translate(680px, 360px)
  }
  100% {
    transform: translate(715px, 375px);

  }

}

.wenhuazhanshiqu-move {
  animation-duration: 12s !important;
}

@keyframes wenhuazhanshiqu {
  20% {
    transform: translate(560px, 630px)
  }
  40% {
    transform: translate(380px, 550px)
  }
  70% {
    transform: translate(210px, 356px)
  }
  80% {
    transform: translate(265px, 310px)
  }
  100% {
    transform: translate(190px, 220px)
  }

}

@keyframes wenhuachanglang {
  80% {
    transform: translate(550px, 630px);
  }
  100% {
    transform: translate(520px, 585px)
  }
}
.wenhuachanglang-move{
  animation-duration: 4s !important;
}

@keyframes hour24xiuxi {
  20% {
    transform: translate(560px, 630px)
  }
  40% {
    transform: translate(380px, 550px)
  }
  100% {
    transform: translate(60px, 320px)
  }

}

.caifuguanlizhongxin-move {
  animation-duration: 12s !important;
}

@keyframes caifuguanlizhongxin {
  20% {
    transform: translate(560px, 630px)
  }
  40% {
    transform: translate(380px, 550px)
  }
  60% {
    transform: translate(240px, 390px)
  }
  80% {
    transform: translate(260px, 340px)
  }

  100% {
    transform: translate(380px, 380px)
  }
}

@keyframes jinsenianhua {

  10% {
    transform: translate(750px, 575px)
  }
  60% {
    transform: translate(1020px, 320px)
  }

  70% {
    transform: translate(1080px, 320px)
  }


  100% {
    transform: translate(1150px, 465px)
  }
}

@keyframes yangguanlicaigongzuoshi {
  15% {
    transform: translate(870px, 645px)
  }
  100% {
    transform: translate(1090px, 455px)
  }
}

@keyframes dalipuhuijinronggongzuoshi {
  20% {
    transform: translate(750px, 575px)
  }
  50% {
    transform: translate(845px, 480px)
  }
  100% {
    transform: translate(650px, 280px)
  }
}

.yangguanglicaigongzuoshi-move {
  animation-duration: 12s !important;
}

@keyframes yangguanglicaigongzuoshi {
  20% {
    transform: translate(560px, 630px)
  }
  40% {
    transform: translate(380px, 550px)
  }
  60% {
    transform: translate(240px, 390px)
  }
  70% {
    transform: translate(260px, 340px)
  }
  85% {
    transform: translate(380px, 380px)
  }
  100% {
    transform: translate(320px, 250px)
  }
}



</style>